<template>
  <div>
    <div style=" display: flex; aligin-items: center">
      <el-input
        
        style="width: 300px"
        v-model="search"
        size="medium"
        placeholder="输入关键字搜索"
      />
      <el-button
      @click="checkDoods" 
        icon="el-icon-search"
        style="height: 38px;width:100px; margin-left: 20px"
        type="primary"
        plain
        >搜索</el-button
      >
    </div>
    <el-table
      :data="rows"
      style="width: 100%;min-height:450px; box-sizing: border-box"
    >
      <el-table-column fixed prop="images" label="商品图片" width="150">
        <template scope="scope">
          <img :src="scope.row.images" style="height: 50px" />
        </template>
      </el-table-column>
      <el-table-column fixed prop="production" label="生产日期" width="100">
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="100">
      </el-table-column>
      <el-table-column prop="goodsNum" label="商品库存" width="100">
      </el-table-column>
      <el-table-column prop="price" label="商品价格" width="100">
      </el-table-column>
      <el-table-column prop="producer" label="商品产地" width="100">
      </el-table-column>
      <el-table-column prop="shelfLife" label="保质期" width="100">
      </el-table-column>
      <el-table-column prop="weight" label="商品重量" width="100">
      </el-table-column>
      <el-table-column prop="desc" label="商品描述" width="150">
      </el-table-column>
      <el-table-column prop="discount" label="是否打折" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.discount">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="商品大种类" width="100">
      </el-table-column>
      <el-table-column prop="kind" label="商品小种类" width="140">
      </el-table-column>
      <el-table-column prop="kind" label="操作" width="200">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="修改图片"
            placement="top-start"
          >
            <el-button
              @click="updataImg(scope.$index)"
              icon="el-icon-picture-outline"
              circle
            ></el-button>
          </el-tooltip>

          <el-button size="mini" @click="updata(scope.$index)">更新</el-button>
          <el-button size="mini" type="danger" @click="delCoods(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-size="3"
        background
        layout="prev, pager, next,total"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 图片修改 -->
    <div>
      <el-dialog
        title="图片修改"
        :visible.sync="isUpdataImg"
        width="30%"
        :before-close="handleClose"
      >
        <ShopGoodsUpdataImgs @isDataImg="isDataImg" @updataImg="updataImgGoods" :isUpdataImg="isUpdataImg" :imagesRow="imagesRow" />
      </el-dialog>
    </div>
    <!-- 商品修改 -->
    <div>
      <el-dialog
        title="商品修改"
        :visible.sync="isUpdata"
        width="30%"
        :before-close="handleClose"
      >
        <ShopGoodsUpdataGoods
          v-if="isUpdata"
          @closepop="closepop"
          :isUpdata="isUpdata"
          :update="update"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapMutations, mapState } =
  createNamespacedHelpers("shopGoods");
export default {
  async mounted() {
    this.get();
  },
  data() {
    return {
      isUpdataImg: false,
      isUpdata: false,
      update: {},
      search: "",
      pagesize: 3,
      imagesRow:{},
    };
  },
  computed: mapState(["rows", "curPage", "eachPage", "total"]),
  methods: {
    ...mapActions(["get"]),
    ...mapMutations(["updataGoods", "delteGoods", "setCurPage", "serchDoods","updataImgGoods"]),

    async updata(i) {
      this.$data.isUpdata = !this.$data.isUpdata;
      this.$data.update = this.rows[i];
    },
    closepop() {
      this.$data.isUpdata = false;
      this.get();
    },
    async delCoods(i) {
      const { images } = this.rows[i];
      console.log(images);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delteGoods(this.rows[i]);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange(val) {
      this.setCurPage(val);
    },
    //查询
    checkDoods() {
      const serName = this.$data.search;
      this.serchDoods(serName);
    },
    // 弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //修改图片
    updataImg(i) {
      this.$data.isUpdataImg = true;
      this.$data.imagesRow = this.rows[i]
    },
    isDataImg(){
      this.$data.isUpdataImg = false
    }
  },

  watch: {
    curPage() {
      this.get();
    },
  },
};
</script>

<style scoped>
</style>

